<template>
  <div class="bg">
    <div class="wrap">
      <el-row :gutter="20">
        <el-col :span="7">
          <div class="grid-content">
            <Circle1 />
          </div>
          <div class="grid-content">
            <!-- <Circlering /> -->
          </div>
        </el-col>
        <el-col :span="9">
          <div class="grid-content">
            <Circle2 />
          </div>
          <div class="grid-content">sss</div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content">
            <Circle3 />
          </div>
          <div class="grid-content" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import Circle1 from './components/Circle1.vue'
import Circle2 from './components/Circle2.vue'
import Circle3 from './components/Circle3.vue'
export default {
  name: 'ECharts2',
  components: { Circle1, Circle2, Circle3 },
  data() {
    return {
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {

  }
}
</script>
<style>
html{
    font-size: calc(100vw/200)
}
body{font-size: 100%;}
</style>
<style scoped>
.bg { font-family:"Microsoft YaHei"; font-size:2rem; color:#333; line-height:150%; background:#fff;}
.wrap {padding:3rem;width:100%;}
.grid-content {
    border-radius: 4px;
    border:1px solid #40afd5;
    width:100%;
    margin-top:1rem;
    height: 30rem;
  }
</style>

